<template>
  <div class="index">
    <a-spin tip="loading..." :spinning="spinning">
      <a-layout id="components-layout-demo-side">
        <a-layout-sider
          :style="{
            overflow: 'hidden',
            height: '100vh',
            position: 'fixed',
            left: 0
          }"
        >
          <div style="padding: 40px 0; text-align: center">
            <img
              src="@/assets/imgAdmin/logo.png"
              alt=""
              style="margin-bottom: 14px; width: 90%"
            /><br />
          </div>
          <a-menu
            mode="inline"
            @select="handleSelectNav"
            :selectedKeys="activeHeaderMenu"
            :openKeys="openKeys"
            @openChange="onOpenChange"
            theme="dark"
          >
            <template v-for="item in navList">
              <a-menu-item :key="item.name">
                <a-icon :type="item.meta.icon" />
                <span>{{ item.meta.name }}</span>
              </a-menu-item>
              <!--<a-menu-item v-if="!item.children" :key="item.name">-->
              <!--<a-icon :type="item.meta.icon" />-->
              <!--<span>{{ item.meta.name }}</span>-->
              <!--</a-menu-item>-->
              <!--<sub-menu v-else :menu-info="item" :key="item.name" />-->
            </template>
          </a-menu>
        </a-layout-sider>
        <a-layout :style="{ marginLeft: '200px', height: '100vh' }">
          <a-layout-header class="header">
            <div class="header-box">
              <div>北京畅想新影官网后台管理系统</div>
              <div>
                <a-dropdown>
                  <a class="ant-dropdown-link" href="#"
                    ><span>{{ userInfo.true_name }}</span> <a-icon type="down"
                  /></a>
                  <a-menu slot="overlay">
                    <a-menu-item key="0">
                      <div class="info-wrapper">
                        <span style="font-weight: bold">{{
                          userInfo.true_name
                        }}</span>
                        <div class="info-item">
                          <span>账号：</span>
                          <span>{{ userInfo.username }}</span>
                        </div>
                        <div class="info-item">
                          <span>手机号码：</span>
                          <span>{{ userInfo.mobile }}</span>
                        </div>
                        <a-button type="primary" @click="visible = true"
                          >编辑个人信息</a-button
                        >
                        <a-divider type="vertical" />
                        <a-button @click="logout" type="danger"
                          >退出登录</a-button
                        >
                      </div>
                    </a-menu-item>
                  </a-menu>
                </a-dropdown>
              </div>
            </div>
          </a-layout-header>
          <a-layout-content>
            <div class="content">
              <a-breadcrumb style="margin-bottom: 16px">
                <a-breadcrumb-item
                  v-for="(item, index) in breadcrumbList"
                  :key="index"
                >
                  <a
                    href="javascript:void(0);"
                    @click="goPage(item.router, index)"
                    >{{ item.name }}</a
                  ></a-breadcrumb-item
                >
              </a-breadcrumb>
              <router-view />
            </div>
          </a-layout-content>
          <a-layout-footer style="textAlign: center">
            北京畅想新影影业有限公司
          </a-layout-footer>
        </a-layout>
      </a-layout>
    </a-spin>
    <add-modal
      :editInfo="userInfo"
      :visible="visible"
      :editBoxState="editBoxState"
      @handleCancel="handleCancel"
    ></add-modal>
  </div>
</template>

<script>
import { mapState } from "vuex";
import indexAdminRoute from "@/tool/adminRoute";
export default {
  name: "index",
  components: {
    addModal: () => import("@/views/index/add")
  },
  data() {
    return {
      collapsed: false,
      rootSubmenuKeys: [],
      visible: false,
      editBoxState: 1,
      navList: indexAdminRoute.children
    };
  },
  methods: {
    handleCancel(isFresh) {
      if (isFresh) {
        this.getUserInfo();
      }
      this.visible = false;
    },
    handleSelectNav(item) {
      if (item.key === "home") {
        this.$store.dispatch("changeOpenKey", []);
      }
      this.goPage(item.key);
    },
    goPage(routerName, index) {
      //  处理面包屑
      if (index) {
        if (this.breadcrumbList.length >= 3 && index === 2) {
          this.$router.push({ name: routerName });
        } else {
          return false;
        }
      } else {
        this.$router.push({ name: routerName });
      }
    },
    logout() {
      this.$ajax
        .post(this.$api.logout)
        .then(() => {
          localStorage.removeItem("token");
          sessionStorage.clear();
          this.$router.push({ name: "adminLogin" });
          this.$store.dispatch("changeLoginState", false);
        })
        .catch(err => {
          this.$notification.error({
            message: err
          });
        });
    },
    onOpenChange(openKeys) {
      const latestOpenKey = openKeys.find(
        key => this.openKeys.indexOf(key) === -1
      );
      if (this.allSubMenuKeyList.indexOf(latestOpenKey) === -1) {
        this.$store.dispatch("changeOpenKey", openKeys);
      } else {
        let openkey = latestOpenKey ? [latestOpenKey] : [];
        this.$store.dispatch("changeOpenKey", openkey);
      }
    },
    getUserInfo() {
      this.$ajax
        .post(this.$api.getAdminInfo, { id: localStorage.getItem("id") })
        .then(res => {
          this.$store.dispatch("changeUserInfo", res);
        })
        .catch(err => {
          this.$notification.error({
            message: err
          });
        });
    }
  },
  computed: {
    ...mapState({
      userInfo: "userInfo",
      routerName: "currentRouterName",
      activeHeaderMenu: "activeHeaderMenu",
      breadcrumbList: "currentBreadcrumb",
      allSubMenuKeyList: "allSubMenuKeyList",
      openKeys: "openKey",
      spinning: "spinning"
    })
  },
  created() {
    this.goPage(this.routerName);
    this.getUserInfo();
  }
};
</script>

<style scoped lang="less">
.index {
  width: 100%;
  height: 100%;
}

.ant-layout {
  height: 100%;
}
#components-layout-demo-side .header-box {
  .flex_content();
  .flex_justify_space();
  span {
    font-size: 16px;
  }
  .logout {
    color: red;
    cursor: pointer;
  }
}
.info-wrapper {
  padding: 16px;
  text-align: center;
}
.info-item {
  .flex_content();
  .flex_justify_space();
  padding: 5px 0;
}
.ant-menu {
  height: 100%;
  overflow: auto;
}
.content {
  height: 100%;
  width: 100%;
  box-sizing: border-box;
  overflow-y: auto;
  padding: 16px;
}
</style>
